<!DOCTYPE html >
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
        *{
           margin:0;
           padding: 0;
        }
        .wrap{
            width:500px;
            margin:20px auto;
            text-align: center;
            display:flex;
        }
        .wrap input{
            height:30px;
            width:240px;
            border-radius:6px;
            border: 1px solid #d2d2d2;
            padding-left: 6px;
            outline: none;
        }
        #timeBtn{
            width:120px;
            height:32px;
            line-height: 32px;
            text-align: center;
            background:green;
            color:#fff;
            border-radius: 6px;
            margin-left:4px;
            text-decoration: none;
        }
        #showMsg{
            text-align: center;
            color:green;
            font-size: 18px;
            font-weight: 600;
        }
    </style>
</head>

<body>
    
    <div class="wrap">
        <input type="text" id="timeMsg" placeholder="格式为yyyy-mm-dd或者yyyy/mm/dd">
        <a href="javascript:;" id="timeBtn">倒计时</a>
    </div>
    <p id="showMsg"></p>
    <script>

        /**
         *   86400 = 24 * 60(分) * 60 (秒) 
         * ***/
        var timeMsg = $('#timeMsg');
        var timeBtn = $('#timeBtn');
        var showMsg = $('#showMsg');
        var re = /\d+[-/]\d+[-/]\d+|\d+[-/]\d+[-/]\d+\s\d+:\d+(:\d+)*/;
        var str = '';
        timeBtn.onclick = function() {
            clearInterval(  setTimeFn.timer );
            var txt = timeMsg.value.trim();
            if( txt == '') {
                alert( '请输入时间');
            }else if( !re.test(txt) ) {
                alert( '请输入正确的时间');
            }else{
                var newDate = new Date( txt );
                setTimeFn( newDate );
            }
        }

        
        function setTimeFn( newDate ) {
            setTimeFn.timer = setInterval( function(){
                var nowDate = new Date();
                var t = Math.floor((newDate - nowDate) / 1000) // 得到秒
                if( t < 0 ) {
                    clearInterval(  setTimeFn.timer );
                    alert('时间不能小于当前时间');
                    return;
                }
                var day = Math.floor( t/86400 );
                var hour = Math.floor( t%86400/3600 );
                var min = Math.floor( t%86400/3600/60 );
                var sec = Math.floor( t%60 );
                if( t >=0 ) {
                    str = '距离' + fillZero( timeMsg.value.trim() ) + '还有：' + day + '天' + hour + '时' + min +'分' + sec + '秒';
                }else{
                    str = '';
                    clearInterval(  setTimeFn.timer );
                }
                showMsg.innerHTML = str; // 不要直接赋值，不然会有闪烁
            },1000);
           
        }
        
       // fillZero( '2019/5/06' );

        /**
         *  补零操作 
         *   value  分两种情况  2019-05-06  不传时分秒
         *    2019-05-06  10::05:06  传时分秒
         * 
         * 
         * **/
        function fillZero( value ) {
            var numArr = null;
            if( value.indexOf(':') > -1) {  //传时分秒
               numArr = value.split(' '); //["2019/5/06", "10:5:2"]
               var ymdArr = zeroFn(numArr[0].split(/[-/]/));
               var hmsArr = zeroFn(numArr[1].split(/[:：]/));
               var s = ymdArr.join('-') + ' ' + hmsArr.join(':');
               return s;
            }else{
                var numArr = zeroFn(value.split(/[-/]/));
                return numArr.join('-');
            }
        
            function zeroFn( obj ) {
                for( var i=0;i<obj.length;i++ ) {
                    if( obj[i].length < 2 ) {
                        obj[i] =  '0' +  obj[i];
                    }
                }
                return obj;
            }
          
        }
        function $( obj ) {
            return document.querySelector( obj );
        }
        function $$( obj ) {
            return document.querySelectorAll(obj);
        }
    </script>

</body>

</html>